<template>
	<div ref='container' :style='height'>
		<view class="arrow">
			<van-icon @click='onClickLeft' name="arrow-left" />
		</view>
		<SignTitle :SignTypeA='SignType' />
		<StepBar :step='4'></StepBar>
		<Tips>
			<template #title>
				<view class="title">
					请设置<text class="h_3">安全密码</text>
				</view>
			</template>
			<template #main>
				<view class="main">
					<view class="tips">此密码是您在APP内重要操作使用的密码，请您牢记</view>
					<ul class="h_3">
						<li>密码长度8-32位</li>
						<li>最少1个小写字母</li>
						<li>最少1个大写字母</li>
						<li>最少1个数字</li>
					</ul>
				</view>
			</template>
		</Tips>
		<van-form class="Form" @submit="onSubmit">
			<van-field v-model="password" :type="pwd? 'password':'text'" name="密码" placeholder="请输入安全密码"
				@click-right-icon='Show' :rules="[{ pattern:pwdREgular, message: regular }]">
				<template #right-icon>
					<van-icon v-if="pwd" name="eye-o" color="#848496" size='20' />
					<van-icon v-else name="closed-eye" color="#848496" size='20' />
				</template>
			</van-field>
			<van-field v-model="newPassword" :type="pwdB? 'password':'text'" name="密码" placeholder="再次确认安全密码"
				@click-right-icon='ShowB' :rules="[{ validator:asyncValidator, message: '请输入正确内容' }]">
				<template #right-icon>
					<van-icon v-if="pwdB" name="eye-o" color="#848496" class="icon" size='20' />
					<van-icon v-else name="closed-eye" color="#848496" class="icon" size='20' />
				</template>
			</van-field>
			<div class="subButton">
				<subButton native-type="submit">完成</subButton>
			</div>
		</van-form>
		<view class="SignIn" @click="LogIn">已有账号？去 <text>登录</text></view>
	</div>
</template>

<script lang="ts" setup>
	import StepBar from '@/components/signIn/StepBar/index.vue'
	import SignTitle from '@/components/signIn/signTitle/index.vue'
	import { Adaptive } from '@/utils/Adaptive'
	import { debounce } from '@/utils/debounce'
	import { showNotify } from 'vant';
	import subButton from '@/components/signIn/subButton/index.vue'
	import Tips from '@/components/signIn/Tips/index.vue'
	import { onLoad } from '@dcloudio/uni-app';
	import { ref, onMounted } from 'vue';
	import { postSign } from '@/api/sign.ts'

	import { useStore } from 'vuex'
	const store = useStore()
	// 接受上一页面的数据
	onLoad((val : any) => {
		SignType.value = val.SignType
	})
	// 上一页面的数据接受
	const SignType = ref('')
	const onClickLeft = () => {
		history.back()
	};
	//输入框的双向变量
	const password = ref<string>('');
	const newPassword = ref<string>('');

	// 密码的眼睛
	const pwd = ref<boolean>(true)
	const pwdB = ref<boolean>(true)
	const Show = () => {
		pwd.value = !pwd.value
	}
	const ShowB = () => {
		pwdB.value = !pwdB.value
	}


	// 控制页面的底色
	const container = ref()
	const height = ref()
	onMounted(() => {
		const { boxHeight, windowHeight } = Adaptive(container.value)
		if (boxHeight > windowHeight) {
			height.value = { height: '100%' }
		} else {
			height.value = { height: '100vh' }
		}
	})


	// 点击从手机号开始重新注册
	const LogIn = () => {
		uni.navigateTo({
			url: '/pages/login/index'
		})
	}


	//  定义一个密码的正则表达式
	const pwdREgular = /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)[A-Za-z\d]{8,31}$/
	const regular = () => {
		showNotify({ type: 'danger', message: '需要满足以上的条件' });
	}
	// 判断确认密码是否与新密码一样
	const asyncValidator = debounce((val : string) =>
		// 该方法默认创建的promise对象
		new Promise((resolve) => {
			console.log(newPassword.value, password.value)
			if (newPassword.value !== password.value) {
				showNotify({ type: 'danger', message: '密码保持一致' });
			}
			// 判断是否一样
			resolve(newPassword.value === password.value)
		}), 300);

	// 注册完成
	const result = ref()
	const onSubmit = async () => {
		// 判断是否是电话号码注册还是邮箱注册
		if (store.state.sign.sourceType === 1) {
			result.value = {
				mobile: store.state.sign.phone,
				type: store.state.sign.type,
				areacode: store.state.sign.areacode,
				payPassword: newPassword.value,
				inviteCode: store.state.sign.inviteCode,
				password: store.state.sign.password,
				code: store.state.sign.code,
				sourceType: store.state.sign.sourceType
			}
		} else {
			result.value = {
				type: store.state.sign.type,
				payPassword: newPassword.value,
				email: store.state.sign.Email,
				inviteCode: store.state.sign.inviteCode,
				password:store.state.sign.password,
				code: store.state.sign.code,
				sourceType: store.state.sign.sourceType
			}
		}

		// 
		// try{
		console.log(result.value)

		const data = await postSign(result.value)
		console.log(data)
		if (data.code === 200) {
			showNotify({ type: 'success', message: data.msg});
			uni.navigateTo({
				url: '/pages/login/index'
			})
		} else if (data.code === 500) {
			showNotify({ type: 'danger', message: data.msg});
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		font-size: 28px;
		color: #b0b0b3;

		.h_3 {
			font-weight: 600;
			color: white;
		}
	}

	.main {
		font-size: 28px;
		color: #b0b0b3;

		.h_3 {
			padding-left: 40px;

			li {
				list-style-type: circle;
				line-height: 40px;
			}
		}
	}

	::v-deep.van-cell-group {
		background: transparent;
	}

	.van-cell {
		height: 120px;
		background: #393759;
		opacity: 0.9;
		border-radius: 24px;
		border: 1px solid black;
		margin-bottom: 24px;
	}

	::v-deep.van-field__body {
		height: 96px;
		text-align: center;

	}

	::v-deep.van-field__control {
		font-size: 32px;
		color: white;
		text-align: center;
	}

	.Form {
		padding: 0 40px;
	}

	.icon {
		font-size: 20px;
	}

	.arrow {
		position: fixed;
		z-index: 1000;
		top: 80px;
		left: 40px;

		.van-icon {
			color: white;
			font-size: 40px;
		}
	}

	.inputBtm {
		margin-bottom: 0;
		width: 65%;
	}

	.subButton {
		padding-bottom: 200px;
	}

	.SignIn {
		position: absolute;
		bottom: 24px;
		left: 50%;
		transform: translateX(-50%);
		font-size: 28px;
		color: white;

		text {
			color: #0aa997;
		}
	}

	::v-deep.van-cell:after {
		display: none;
	}

	::v-deep.van-field__error-message {
		display: none;
	}

	::v-deep.van-notify--danger {
		border-bottom-right-radius: 20px;
		border-bottom-left-radius: 20px;
		padding: 15px 0;
	}
</style>